<template>
  <div>
      <div class="tan" v-show="fff">
          value:
          <input type="text" v-model="val.value"><br>
          value
          <input type="text" v-model="vals.valua">
            <button @click="fun">确认</button>
            <button @click="funt">取消</button>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            val:{
                value:"",
            },
            vals:{
                valua:""
            },
            fff:true
        }
    },
    watch:{
        val:{
            deep:true,
            handler(newValue){
                this.value = newValue
                // console.log(val.value.newValue);
            }
        },
        vals:{
            deep:true,
            handler(newVa){
                this.valua = newVa
            }
        }
    },
    methods:{
        fun(){
            this.$emit('send',this.value)
            this.$emit('sends',this.valua)
        },
        funt(){
            this.fff = false
        }
    }
}
</script>

<style>
.tan{
    width: 500px;
    height: 200px;
    border: 1px solid #000;
    margin-left: 200px;
    margin-top: 50px;
}
input{
    margin-left: 100px;
    margin-top: 25px;
}
</style>